<!DOCTYPE html>
<html>
<head>
	<title>client</title>
	<style type="text/css">
		.div1 {
			width: 200px;
			height: 200px;
			background: red;
			margin-left: 200px;
		}
		.div2 {
			width: 100px;
			height: 100px;
			background: blue;
			margin-left: 50px;
			padding: 10px;
			border: 30px solid yellow;
		}
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
<script type="text/javascript">
	
/* client
	
	1. 该属性表示的是盒子的边框

	2. 表示的是盒子（width + border + padding）
*/

var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];

console.log(div1.clientLeft);
console.log(div2.clientLeft);
console.log(div2.offsetWidth);

</script>
</body>
</html>